<script>
export default {
  props: {
    showMore: {
      type: Boolean,
      default: false,
    },
    num: {
      type: Number,
      default: 0,
    },
    total: {
      type: Number,
      default: 0,
    },
    data: Array,
  },
}
</script>

<template>
  <view class="join-list-container">
    <view class="join-list-header">
      <view class="join-list-header-title">参与人员
        <text class="join-list-total">(共{{ num }}人中奖)</text>
      </view>
      <view class="join-list-num" @click="$emit('showMore')">共{{ total }}人
        <image class="join-list-right-icon" src="/static/images/common/arrow-right.png" v-if="showMore"></image>
      </view>
    </view>
    <view class="join-item" v-for="item in data" :key="item.id">
      <image class="join-item-crown" v-if="item.is_winner" src="/static/images/welfare/ic-crown.png"></image>
      <image class="join-item-avatar" :src="item.avatar"></image>
      <text class="join-item-username">{{ item.nickname }}</text>
      <view style="flex: 1"></view>
      <text class="join-item-time">{{ item.created_at }}</text>
    </view>
  </view>
</template>

<style scoped lang="scss">
.join-list-container {
  width: 710rpx;
  background-color: #170A00;
  margin: 20rpx auto;

  .join-list-header {
    display: flex;
    padding: 32rpx 20rpx 10rpx;
    align-items: center;
    justify-content: space-between;

    .join-list-header-title {
      color: white;
      font-weight: bold;
      font-size: 28rpx;

      .join-list-total {
        color: #DED000;
      }
    }

    .join-list-num {
      font-size: 24rpx;
      color: #A0A0A0;

      .join-list-right-icon {
        width: 16rpx;
        height: 16rpx;
      }
    }
  }

  .join-item {
    position: relative;
    display: flex;
    align-items: center;
	height: 500rpx;
    /*width: 100%;*/
    width: 670rpx;
    height: 84rpx;
    box-sizing: border-box;
    padding: 0 20rpx;
    color: white;
    font-size: 24rpx;
    background-image: url("https://www.dingxians.cn/upload/user_static/welfare/bg-join-item.png");
    background-size: 100% 100%;
    margin: 0 auto 16rpx auto;
	overflow: hidden;
	overflow-y: auto;

    .join-item-crown {
      z-index: 88;
      position: absolute;
      left: 25rpx;
      top: -8rpx;
      width: 30rpx;
      height: 30rpx;
    }

    .join-item-avatar {
      border-radius: 50%;
      width: 40rpx;
      height: 40rpx;
    }

    .join-item-username {
      margin-left: 12rpx;
    }

    .join-item-time {
      color: #A0A0A0;
    }
  }
}
</style>